import { useMapCity } from '@/stores/mapCity'
import {
  getLocationByCityNameHttp,
} from '@/request/homeHttp'
import { toRefs } from 'vue'
//渲染区域
async function loadArea({$map}) {
  const $useMapCity = useMapCity()
  
  const $currentCity = toRefs($useMapCity).currentCity
  //获取经纬度
  const { geocodes } = await getLocationByCityNameHttp($currentCity.value)
  // console.log(geocodes)
  let center = geocodes[0].location.split(',')
  let adcode=geocodes[0].adcode
  const source_area=new ol.source.Vector({
    url:`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}.json`,
    format:new ol.format.GeoJSON()
  })
//   console.log(source_area)
  const style=new ol.style.Style({
    stroke:new ol.style.Stroke({
      color:'red',
      width:2
    }),
    fill:new ol.style.Fill({
      color:"rgba(139,137,134,0.3)",
      opcacity:0.1
    })
  })
  const layer_area=new ol.layer.Vector({
    title:"区域",
    source:source_area,
    style,
  })
  $map.addLayer(layer_area)
  //实现漫游
  $map.getView().animate({
    center,
    duration: 1000,
    zoom: 10,
  })
}
//获取图层，通过title属性
function getLayerBytitle({$map}){
  const layers=$map.getLayers().getArray()
  return layers.find(layer=>layer.get("title")=="区域")
}
export {loadArea,getLayerBytitle}